<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

	<head>
		<title>test</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
		<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body.* {
				font-family: "微软雅黑";
			}
			
			.article {
				-webkit-box-shadow: none;
				box-shadow: none;
				border-bottom: 1px solid #f0f2f7;
				margin-bottom: 0px;
				background: #fff;
				overflow: hidden;
				border-radius: 2px;
				-webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
				box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			.article>.media-body>p>a {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			
			.content a {
				text-decoration: none;
			}
			
			@media (max-width:768px) {
				form {
					display: none;
				}
				.myul {
					position: absolute;
					top: 0px;
					left: 50%;
				}
				.myul li {
					float: left;
				}
				.navbar-nav>li>ul>.dropdown-menu {
					min-width: 106px;
				}
			}
			#Live{
				color: #8590a6;
				font-size: 16px;
			}
			#Live:hover{
				color: #FFCF00;
			}
				#shudian{
				color: #8590a6;
				font-size: 16px;
			}
			#shudian:hover{
				color: #43D480;
			}
				#yuanzhuo{
				color: #8590a6;
				font-size: 16px;
			}
			#yuanzhuo:hover{
				color: #0084FF;
			}
				#zhuanlan{
				color: #8590a6;
				font-size: 16px;
			}
			#zhuanlan:hover{
				color: #0084FF;
			}
				#fufei{
				color: #8590a6;
				font-size: 16px;
			}
			#fufei:hover{
				color: #5478F0;
			}
			#row1:hover{
				background: #F6F6F6;
			}
			#row2:hover{
				background: #F6F6F6;
			}
			#row3:hover{
				background: #F6F6F6;
			}
			#row4:hover{
				background: #F6F6F6;
			}
			#row5:hover{
				background: #F6F6F6;
			}
		</style>

	</head>

	<body style="background: #F6F6F6;">

		<div class="navbar  navbar-default navbar-fixed-top" style="box-shadow: 0 0 2px lightgrey;background: white;">
			<div class="container">
				<div class="navbar-header">
					<a href="#">
						<img src="img/bihubihu.png" height="50.99px">
					</a>
					<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>

				<ul class="navbar-nav nav collapse navbar-collapse ">
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">发现</a>
					</li>
					<li>
						<a href="#">等你来答</a>
					</li>

				</ul>

				<form class="navbar-form form-inline navbar-left" style="margin-left: 70px;" method="post">
					<div class="form-group">
						<input class="form-control" type="text" placeholder="请输入" style="min-width: 300px;">
						<input class="btn btn-info" type="button" value="搜索" />
					</div>
				</form>
				<ul class="nav navbar-header navbar-nav navbar-right myul" style="margin-right: 140px;">
					<li>
						<a href="#">登录</a>
					</li>
					<li>
						<a href="#">注册</a>
					</li>
					<li class="dropdown">
						<a href="#" data-toggle="dropdown"><img src="img/bihubihu.png" width="30px"></a>
						<ul class="dropdown-menu  aria-haspopup=" true " style="width: 50px; ">
						<li class="text-left ">
							<a href="# "><span class="glyphicon glyphicon-user "style="margin-right: 10px; "></span>我的主页</a>
						</li>
						<li class="text-left ">
							<a href="# "><span class="glyphicon glyphicon-cog "style="margin-right: 10px ";></span>设置</a>
						</li>
						<li class="text-left ">
							<a href="# "><span class="glyphicon glyphicon-log-in "style="margin-right: 10px ";></span>退出</a>
						</li>
						
					</ul>
				</li>
				</ul>
				
			</div>
			
		</div>
		
		
		
		<div class="container article " style=" width: 694px;min-height: 265.89px;margin-top: 60px;margin-left: 200px; ">
			<div class="row ">
				<ul class="nav nav-tabs ">
					<li role="presentation " class="active ">
						<a href="# " style="font-weight: 600; ">推荐</a>
					</li>
					<li role="presentation ">
						<a href="# " style="font-weight: 600; ">关注</a>
					</li>
					<li role="presentation ">
						<a href="# " style="font-weight: 600; ">热榜</a>
					</li>
				</ul>
			</div>
			<div class="row ">
				<div class="col-md-12 " style="margin-top: 20px; ">
					<a href=" " style="display: inline-block; font-weight: 600;font-size: 18px; text-decoration: none;width: 198px; height: 23.1px; color: black; ">我是你的爸爸吗?</a>
				</div>
			</div>
			<div class="row " style="word-wrap:break-word; word-break:break-all; ">
				<div class="media ">
					<div class="media-left ">
						<a href="# " class="media-object ">
							<img src="img/loginback.png " width="189.99px " height="105px " style="margin-top: 20px; margin-left: 20px;box-shadow: 2px 2px 2px #D4D4D4; " /></a>
					</div>
					<div class="media-body ">
						<p>
							<div class="content " style=" width: 450px;background-color:white;line-height: 26px;font-size: 15px; ">
								<a href=" " style="text-decoration: none; ">2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。</a>
							</div>
						</p>
					</div>
				</div>
			</div>
			<div class="row " style="margin-top: 10px; margin-left: -10px; ">
				<div class="col-md-2 ">
					<button id="hehe "  class="btn btn-default text-center " style="color: #0084ff;background: rgba(0,132,255,.1);border-color: transparent; font-size: 14px;border-radius: 3px; height: 31.35px; ">赞同    301</button>
				</div>
				<div class="col-md-1 ">
					<button class="btn-default " style="border:1px solid;color: #0084ff;background: rgba(0,132,255,.1);border-color: transparent;font-size: 14px;border-radius: 3px;width: 35.96px; height: 31.35px; margin-left: -25px; ">
						<span class="glyphicon glyphicon-thumbs-down "></span>
					</button>
				</div>
				<div class="col-md-2" style="width: 200px;margin-left:40px;">
					<button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;361条评论</button>
				</div>
				<div class="col-md-2" style="width: 200px;margin-left:-90px;">
					<button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;分享</button>
				</div>
				<div class="col-md-2" style="width: 200px;margin-left:-120px;">
					<button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;收藏</button>
				</div>
				<div class="col-md-2" style="width: 200px;margin-left:-120px;">
					<button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;感谢</button>
				</div>
			</div>			
		</div>
		
			<div class="container "id="articleleft " style="width: 296.01px; height: 190.58px;background: white; margin-right: 320px;margin-top: -266px;box-shadow: 0 1px 3px rgba(26, 26, 26, .1);">
				<div class="row" style="margin-top: 20px;">
					<div class="col-md-4 text-center">
						<a href="" style="text-decoration: none;"><span class="glyphicon glyphicon-pencil" style="font-size: 20px;color: #8590a6;"></span></a><br />
						<p style="height: 1px;"></p>
						<span style="font-size: 16px;"><a href="" style="text-decoration: none;color: #444;">写回答</a></span>
					</div>
					<div class="col-md-4 text-center">
						<a href="" style="text-decoration: none;"><span class="glyphicon glyphicon-edit" style="font-size: 20px;color: #8590a6;"></span></a><br />
						<p style="height: 1px;"></p>
						<span style="font-size: 16px;"><a href="" style="text-decoration: none;color: #444;">写文章</a></span>
					</div> 
					<div class="col-md-4 text-center">
						<a href="" style="text-decoration: none;"><span class="glyphicon glyphicon-paperclip" style="font-size: 20px;color: #8590a6;"></span></a><br />
						<p style="height: 1px;"></p>
						<span style="font-size: 16px;"><a href="" style="text-decoration: none;color: #444;">写想法</a></span>
					</div>
				</div>
				<div class="row" style="margin-top: 30px; margin-left: -10px;">
					<div class="col-md-7" style="border-bottom: 1px solid #f0f2f7; width: 291px;">
						<p><a href="" style="margin"><span class="glyphicon glyphicon-time" style="color: #8590a6;font-size: 15px;"></span></a><a href="" style="text-decoration: none;margin-left: 20px;color: #8590a6;">我的稍后答</a></p>
					</div>
				</div>
				<div class="row" style="margin-top: 20px; margin-left: -10px;">
					<div class="col-md-7" style="width: 291px;">
						<p><a href="" style="margin"><span class="glyphicon glyphicon-inbox" style="color: #8590a6;font-size: 15px;"></span></a><a href="" style="text-decoration: none;margin-left: 20px;color: #8590a6;">我的草稿</a></p>
					</div>
				</div>
			</div>
			
			<div class="container" style="width: 296.01px; height: 52px;background:white;line-height: 52px;margin-right: 320px; margin-top: 10px;box-shadow: 0 1px 3px rgba(26, 26, 26, .1);">
				<div class="row">
					<div class="col-md-7">
						<a href="" style="color: #8590a6;text-decoration: none;">&nbsp;&nbsp;<span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;创作者中心</a>
					</div>
				</div>
			</div>
			<div class="container text-center" style="width: 296.01px;height: 174.67px;background:white;margin-right: 320px;margin-top: 10px;box-shadow: 0 1px 3px rgba(26, 26, 26, .1);">
				<div class="row" style="margin-top: 20px;">
					<div class="col-md-4" style="height: 55px;">
						<a href=""><span class="glyphicon glyphicon-flash" style="font-size: 24px;color: #FFCF00;"></span></a><br />
						<p style="height: 1px;"></p>
						<a href="" style="text-decoration: none;" id="Live">Live</a>
					</div>
					<div class="col-md-4" style="height: 55px;">
						<a href=""><span class="glyphicon glyphicon-tasks" style="font-size: 24px;color: #43D480;"></span></a><br />
						<p style="height: 1px;"></p>
						<a href="" style="text-decoration: none;" id="shudian">书店</a>
					</div>
					<div class="col-md-4" style="height: 55px;">
						<a href=""><span class="glyphicon glyphicon-globe" style="font-size: 24px;color: #0084FF;"></span></a><br />
						<p style="height: 1px;"></p>
						<a href="" style="text-decoration: none;" id="yuanzhuo">圆桌</a>
					</div>
				</div>
				
				<div class="row" style="margin-top: 20px;">
					<div class="col-md-4" style="height: 55px;">
						<a href=""><span class="glyphicon glyphicon-pencil" style="font-size: 24px;color: #0084FF;"></span></a><br />
						<p style="height: 1px;"></p>
						<a href="" style="text-decoration: none;" id="zhuanlan">专栏</a>
					</div>
					<div class="col-md-4" style="height: 55px;">
						<a href=""><span class="glyphicon glyphicon-tasks" style="font-size: 24px;color: #5478F0;"></span></a><br />
						<p style="height: 1px;"></p>
						<a href="" style="text-decoration: none;" id="fufei">付费咨询</a>
					</div>
					
				</div>
			</div>
			
			<div class="container" style="width: 296.01px; height: 219.56px;background:white;line-height: 45px;margin-right: 320px; margin-top: 10px;box-shadow: 0 1px 3px rgba(26, 26, 26, .1);">
				<div class="row">
					<div class="col-md-7" id="row1" style="width: 296.01px;">
						<a href="" style="color: #8590a6;text-decoration: none;">&nbsp;&nbsp;<span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;&nbsp;&nbsp;我的收藏</a>
					</div>
				</div>
				<div class="row">
					<div class="col-md-7" id="row2" style="width: 296.01px;">
						<a href="" style="color: #8590a6;text-decoration: none;">&nbsp;&nbsp;<span class="glyphicon glyphicon-pushpin"></span>&nbsp;&nbsp;&nbsp;&nbsp;我关注的问题</a>
					</div>
				</div>
				<div class="row">
					<div class="col-md-7" id="row3" style="width: 296.01px;">
						<a href="" style="color: #8590a6;text-decoration: none;">&nbsp;&nbsp;<span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;我的邀请</a>
					</div>
				</div>
				<div class="row">
					<div class="col-md-7" id="row4" style="width: 296.01px;">
						<a href="" style="color: #8590a6;text-decoration: none;">&nbsp;&nbsp;<span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;&nbsp;&nbsp;站务中心</a>
					</div>
				</div>
				<div class="row">
					<div class="col-md-7" id="row5" style="width: 296.01px;">
						<a href="" style="color: #8590a6;text-decoration: none;">&nbsp;&nbsp;<span class="glyphicon glyphicon-grain"></span>&nbsp;&nbsp;&nbsp;&nbsp;版权服务中心</a>
					</div>
				</div>
			</div>
	</body>
	<script src="/js/jquery-1.12.4.min.js "></script>
	<script>
		init();

		function init() {
			var len = 120; //默认显示字数
			var ctn = $(".content "); //获取div对象
			var content = ctn.text(); //获取div里的内容

			// alert(content);
			var span = "<span>" + content.substring(0, len) + "..." + "</span>"; //创建<span>元素
			var haha = content.length > len ? "全文" : "";
			var a = "<a href='javascript:void(0)' class='initAll' >" + haha + "</a>"; //创建<a>元素

			// 设置div内容为空，span元素 a元素加入到div中
			ctn.text("");
			ctn.append(span);
			ctn.append(a);

			$(".initAll").click(function() {
				var _this = $(this);
				// console.log(_this.text(),content)
				if(_this.text() == "全文") { //如果a中含有"展开"则显示"收起"
					_this.text("↑收起");
					_this.prev('span').text(content);
				} else {
					_this.text("全文");
					_this.prev('span').text(content.substring(0, len) + "...");
				}
			});
		}
		
		
		
	
	</script>
	

</html>